<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <!-- 引入bootstrap样式文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- 引入本首页的样式文件 -->
  <link rel="stylesheet" href="css/index.css">
  <title>阿里百秀</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <!-- row里布上三个盒子 -->
      <header class="col-md-2">
        <!-- 左侧盒子里放，logo和nav -->
        <div class="logo">
          <a href="#">
            <!-- 我们如果进入了超小屏，logo里面的图片就隐藏起来  -->
            <img src="images/logo.png" alt="" class="hidden-xs">
            <!-- 当进入了超小屏时，显示“阿里百秀”四个字。 -->
            <span class="visible-xs">阿里百秀</span>
            <!-- 提示：这个图片是白色的所以没加背景色前看不清 -->
          </a>
        </div>
        <div class="nav">
          <ul>
            <!-- glyphicon glyphicon-camera是bootstrap提供的字体图标组件　写上这个类，就显示这个字体图标
            其原因是，这个类会填加一个::before伪元素，并显示这个字体图标 -->
            <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
            <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
            <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
            <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
            <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
          </ul>
        </div>
      </header>
      <div class="artice col-md-7">
        <!-- 新闻块 -->
        <!-- bootstrap里已经写好了清除浮动的类：clearfix，直接写上就可以 -->
        <div class="news clearfix">
          <ul>
            <li>
              <a href="#">
                <img src="upload/lg.png" alt="">
                <p>阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="upload/1.jpg" alt="">
                <p>奇了 成都一小区护卫长的像马云　市民纷纷求合影</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="upload/2.jpg" alt="">
                <p>奇了 成都一小区护卫长的像马云　市民纷纷求合影</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="upload/3.jpg" alt="">
                <p>奇了 成都一小区护卫长的像马云　市民纷纷求合影</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="upload/4.jpg" alt="">
                <p>奇了 成都一小区护卫长的像马云　市民纷纷求合影</p>
              </a>
            </li>
          </ul>
        </div>
        <!-- 发表块 -->
        <div class="publish">
          <div class="row">
            <div class="col-sm-9">
              <!-- bootstrap里已经设定好的h1-6标题和p，以及颜色类等等。。。 -->
              <h3>生活馆　这是生活馆生活馆生活馆生活馆生活馆</h3>
              <p class="text-muted hidden-xs">阿里百秀 发表于 2020-9-30</p>
              <p class="hidden-xs">生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆</p>
              <p class="text-muted">阅读(2417)评论(1)赞 (18)
                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
              </p>
            </div>
            <div class="col-sm-3 pic hidden-xs">
              <img src="upload/3.jpg" alt="">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <!-- bootstrap里已经设定好的h1-6标题和p，以及颜色类等等。。。 -->
              <h3>生活馆　这是生活馆生活馆生活馆生活馆生活馆</h3>
              <p class="text-muted hidden-xs">阿里百秀 发表于 2020-9-30</p>
              <p class="hidden-xs">生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆</p>
              <p class="text-muted">阅读(2417)评论(1)赞 (18)
                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
              </p>
            </div>
            <div class="col-sm-3 pic hidden-xs">
              <img src="upload/3.jpg" alt="">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <!-- bootstrap里已经设定好的h1-6标题和p，以及颜色类等等。。。 -->
              <h3>生活馆　这是生活馆生活馆生活馆生活馆生活馆</h3>
              <p class="text-muted hidden-xs">阿里百秀 发表于 2020-9-30</p>
              <p class="hidden-xs">生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆生活馆　这是生活馆生活馆生活馆生活馆生活馆</p>
              <p class="text-muted">阅读(2417)评论(1)赞 (18)
                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
              </p>
            </div>
            <div class="col-sm-3 pic hidden-xs">
              <img src="upload/3.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="aside col-md-3">
        <a href="#" class="banner">
          <img src="upload/zgboke.jpg" alt="">
        </a>
        <a href="#" class="hot">
          <span class="btn btn-primary">热搜</span>
          <h4 class="text-primary">欢迎加入中国博客联盟</h4>
          <p class="text-muted">欢迎加入中国博客联盟欢迎加入中国博客联盟欢迎加入中国博客联盟欢迎加入</p>
        </a>
      </div>
    </div>
  </div>
</body>

</html>